<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* #footer button {} */
  </style>
</head>
<body>
  <div id="header">
    <div class="left">
      <span>logo</span>
    </div>
    <div class="right"></div>
  </div>
  <div id="main">
    <ul>
      <li class="item">1111</li>
      <li>2222</li>
      <li>3333</li>
      <li class="item">4444</li>
    </ul>
  </div>
  <div id="footer">
    <button class="btn">按钮</button>
    <button class="btn">按钮2</button>
  </div>

  <script>
    // 一.DOM的概述
    // document object model文档对象模型, 主要操作的是和html相关的一些东西
    // DOM 的核心对象就是 document 对象
    // document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
    // DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象





    // 二.获取DOM元素
    // 页面里面本来就有的一些标签，比如html,body,title等，就有专门的获取方式
    // document - 表示文档的document对象
    // console.log(document.documentElement);  // html元素
    // console.log(document.body);  // body元素
    // console.log(document.head);   // head元素
    // console.log(document.title);   // title元素



    // 获取自定义的元素
    // getElementById() 通过id来获取元素
    // 只能获取到一个元素
    // console.log(document.getElementById("footer"));

    // getElementsByTagName()  通过标签名来获取元素
    // 一般获取到的是一个类数组，会有多个元素的一个集合
    // const lis = document.getElementsByTagName("li");
    // for (var i = 0; i < lis.length; i++) {
    //   console.log(lis[i]);
    // }

    // getElementsByClassName()  通过类名来获取元素
    // 一般获取到的是一个类数组，会有多个元素的一个集合
    // console.log(document.getElementsByClassName("item"));


    // querySelector()  通过选择器获取元素，如果获取多个只返回第一个
    // 只能获取到一个元素
    // console.log(document.querySelector("#footer button"));
    // console.log(document.querySelector(".btn"));


    // querySelectorAll()  通过选择器获取元素，可同时获取多个元素，类数组。
    // console.log(document.querySelectorAll(".btn")[0]);
    // const lis = document.querySelectorAll("li");
    // for (let i = 0; i < lis.length; i++) {
    //   lis[i].onclick = function () {
    //     console.log("你点击的是第" + (i + 1) + "个li标签");
    //   }
    // }
    





    // 给找到的元素去添加事件
    // const btn = document.querySelector("#footer button");
    // 事件处理函数, 加点击事件
    // btn.onclick = function() {
    //   console.log("abc");
    // }
  </script>
</body>
</html>